<template>
    <button
        class="el-button"
        :disabled="buttonDisabled || loading"
        :autofocus="autofocus"
        :type="nativeType"
        :class="[
            type ? 'el-button--' + type : '',
            buttonSize ? 'el-button--' + buttonSize : '',
            {
                'is-disabled': buttonDisabled,
                'is-loading': loading,
                'is-plain': plain,
                'is-round': round,
                'is-circle': circle
            }
        ]"
        @click="handleClick"
    >
        <i v-if="loading" class="el-icon-loading"></i>
        <i v-if="icon && !loading" :class="icon"></i>
        <span v-if="$slots.default"><slot></slot></span>
    </button>
</template>
<script>
export default {
    name: 'ElButton',

    inject: {
        elForm: {
            default: ''
        },
        elFormItem: {
            default: ''
        }
    },

    props: {
        type: {
            type: String,
            default: 'default'
        },
        size: {
            type: String,
            default: ''
        },
        icon: {
            type: String,
            default: ''
        },
        nativeType: {
            type: String,
            default: 'button'
        },
        loading: Boolean,
        disabled: Boolean,
        plain: Boolean,
        autofocus: Boolean,
        round: Boolean,
        circle: Boolean
    },

    computed: {
        _elFormItemSize() {
            return (this.elFormItem || {}).elFormItemSize
        },
        buttonSize() {
            return (
                this.size || this._elFormItemSize || (this.$ELEMENT || {}).size
            )
        },
        buttonDisabled() {
            return this.disabled || (this.elForm || {}).disabled
        }
    },

    methods: {
        handleClick(evt) {
            this.$emit('click', evt)
        }
    }
}
</script>
